<template>
	<div>
		<div class="ckfhjl">
			<div class="ckfhjl-top">
				<p>
					<span class="ckfhjl-top-span">{{saleOrderViewVo.dataBillstateStr}}</span>
					<span>订单号 : {{saleOrderViewVo.orderCode}}<i v-if="orderApplySpecial == 1" class="tejia">特价</i></span><span>客户名称 : {{saleOrderViewVo.memberBname}}【{{saleOrderViewVo.gradeName}}】</span>
				</p>
				<p style="float:left;margin-left: 3px;">
					收货人：<span>{{saleOrderViewVo.deliveryContact}}</span> 联系电话：
					<span>{{saleOrderViewVo.deliveryPhone}}</span> 收货地址：
					<span>{{saleOrderViewVo.deliveryArea}}{{saleOrderViewVo.deliveryAddress}}</span>
				</p>
			</div>

			<div class="chuku-table" v-if="saleOrderViewVo.dataBillstate>=4">
				<div style="position: relative;cursor: pointer;" @click="chkuAct=!chkuAct">

					<div class="chuku-top" :class="{chukuactive:chkuAct}">
						<em class="iconfont">&#xe659;</em> 发货记录
					</div>
					<em class="iconfont" :class="{activEm:chkuAct}" style="font-size:12px ;position: absolute;top: 5px;right: 15px;">&#xe634;</em>
				</div>
				<div id="" v-if="chkuAct">

					<div class="chuku-two">
						<span v-if="saleOrderViewVo.dataBillstate==5||saleOrderViewVo.dataBillstate==6" @click="vFun_fahuo"><em class="iconfont" style="font-size:12px ;">&#xe617;</em>修改物流</span>
						<!--<span><em class="iconfont" style="font-size:12px ;">&#xe6bb;</em>打印</span>
	    				<span><em class="iconfont" style="font-size:12px ;">&#xe64a;</em>导出</span>-->
            			<span v-if="saleOrderViewVo.dataBillstate==4" @click="stockValid_btn"><em class="iconfont" style="font-size:12px ;">&#xe644;</em>作废</span>
						<span v-if="saleOrderViewVo.dataBillstate==4" @click="vFun_fahuo"><a class="chuku-two-a">发货</a></span>
					</div>
					<template>
						<el-table :data="saleOrderGoodsViewVoList" style="width: 100%">
							<el-table-column type="index" width="50">
							</el-table-column>
							<el-table-column label="主图" width='100'>
								<template scope="scope">
									<el-popover placement="bottom">
										<div slot="reference" class="name-wrapper">
											<img :src="scope.row.goodsBigPic"/>
										</div>
									</el-popover>
								</template>

							</el-table-column>
							<el-table-column prop="goodsName" label="商品名称">
							</el-table-column>
							<el-table-column prop="goodsSkuValue" label="规格">
							</el-table-column>
							<el-table-column prop="goodsCode" label="商品编码">
							</el-table-column>
							<el-table-column prop="goodsBuyNumStr" label="本次发货数">
							</el-table-column>
						</el-table>
					</template>
					<!--已完成才有这条记录-->
					<div class="table-bottom" style="padding: 15px;">
            <p style="line-height: 30px;" v-if="saleOrderViewVo.dataBillstate==5||saleOrderViewVo.dataBillstate==6"><span>状态</span><span>{{saleOrderViewVo.dataBillstateStr}}</span></p>
            <p style="line-height: 30px;" v-if="saleOrderViewVo.dataBillstate==4||saleOrderViewVo.dataBillstate==5||saleOrderViewVo.dataBillstate==6"><span>出库信息</span><span>出库编号：{{saleOrderViewVo.checkoutCode}}</span><span>出库时间：{{saleOrderViewVo.checkoutDateStr}}</span><span>出库仓库：{{saleOrderViewVo.warehouseName}}</span></p>
						<p style="line-height: 30px;" v-if="saleOrderViewVo.dataBillstate==5||saleOrderViewVo.dataBillstate==6"><span>发货信息</span><span>发货日期:{{saleOrderViewVo.deliveryDateStr}}</span><span>物流公司:{{formLabelAlign.region}}</span><span>物流单号:{{formLabelAlign.type}}</span><span>物流备注:{{form.desc}}</span></p>
          </div>
				</div>
			</div>

			<div class="chuku-table" v-else>
				<div style="position: relative;cursor: pointer;" @click="chkuAct=!chkuAct">

					<div class="chuku-top" :class="{chukuactive:chkuAct}">
						<em class="iconfont">&#xe659;</em> 待出库商品清单
					</div>
					<em class="iconfont" :class="{activEm:chkuAct}" style="font-size:12px ;position: absolute;top: 5px;right: 15px;">&#xe634;</em>
				</div>
				<div v-if="chkuAct">

					<div class="chuku-two">
						<span v-if="saleOrderViewVo.dataBillstate==5||saleOrderViewVo.dataBillstate==6" @click="add=true"><em class="iconfont" style="font-size:12px ;">&#xe617;</em>修改物流</span>
						<!--<span><em class="iconfont" style="font-size:12px ;">&#xe6bb;</em>打印</span>
	    				<span><em class="iconfont" style="font-size:12px ;">&#xe64a;</em>导出</span>
	    				<span><em class="iconfont" style="font-size:12px ;">&#xe644;</em>作废</span>-->
						<span><a class="chuku-two-a" v-if="saleOrderViewVo.dataBillstate==3" @click="save_out">出库</a></span>
					</div>
					<template>
						<el-table :data="saleOrderGoodsViewVoList2" style="width: 100%">
							<el-table-column type="index" width="50">
							</el-table-column>
							<el-table-column label="主图" width='100'>
								<template scope="scope">
									<el-popover placement="bottom">
										<div slot="reference" class="name-wrapper">
											<img :src="scope.row.goodsBigPic"/>
										</div>
									</el-popover>
								</template>

							</el-table-column>
							<el-table-column prop="goodsName" label="商品名称">
							</el-table-column>
							<el-table-column prop="goodsSkuValue" label="规格">
							</el-table-column>
							<el-table-column prop="goodsNo" label="商品编码">
							</el-table-column>
							<el-table-column prop="goodsNum" label="库存数量">
							</el-table-column>
							<el-table-column prop="goodsBuyNumStr" label="订购数">
							</el-table-column>
							<el-table-column prop="goodsBuyNumStr" label="已出库数">
                <template scope="scope">
                  <p v-if="saleOrderViewVo.dataBillstate < 4">0</p>
                  <p v-else>{{scope.row.goodsBuyNum}}</p>

                </template>
							</el-table-column>
							<el-table-column prop="goodsBuyNum" label="本次出库">
							</el-table-column>
						</el-table>
					</template>
					<!--已完成才有这条记录-->
					<div class="table-bottom" style="padding: 15px;" v-if="saleOrderViewVo.dataBillstate==5||saleOrderViewVo.dataBillstate==6">
            <p style="line-height: 30px;"><span>状态</span><span>{{saleOrderViewVo.dataBillstateStr}}</span></p>
						<p style="line-height: 30px;"><span>发货信息</span><span>发货日期:{{saleOrderViewVo.deliveryDateStr}}</span><span>物流公司:{{formLabelAlign.region}}</span><span>物流单号:{{formLabelAlign.type}}</span><span>物流备注:{{form.desc}}</span></p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['deliveryState'],
		data() {
			return {
				saleOrderViewVo: {}, // 订单对象
				orderApplySpecial: '1', // 是否特价
				chkuAct: true, // 出库发货记录是否显示
				add: false,
				emit:{
					add:false,
				},
				saleOrderGoodsViewVoList: [], // 订单商品集合
				saleOrderGoodsViewVoList2: [],
				formLabelAlign: { // 物流信息
					region: '',
					type: ''
				},
				form: { // 物流备注
					desc: ''
				}
			}
		},
		watch:{
			'deliveryState':function(val){
				//do something
				if(val==true){
					this.queryByPage();
					this.queryOrderAndFud();
					this.query_checkout();
				}

			}
		},
		filters: {
			//时间格式转换
			dateFilterFn(val) {
				let time = new Date(val);
				let month = time.getMonth().length == "2" ? time.getMonth() : "0" + time.getMonth();
				let day = time.getDay().length == "2" ? time.getDay() : "0" + time.getDay();
				return time.getFullYear() + "-" + month + "-" + day;
			}
		},
		mounted() {
			//查询订单和当前资金账户详情
			this.queryOrderAndFud();
			this.queryByPage();
			this.query_checkout();
		},
		methods: {
			vFun_fahuo(){  //向父组件传值
				this.emit.add = true;
				this.$emit('vue_fahuo',this.emit);
			},
		  //作废按钮
      stockValid_btn(){
        this.$confirm('是否确认作废？', '作废确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: "fr",
          confirmButtonClass: "fr",
        }).then(({
                   value
                 }) => {
          this.axios({
            method: 'PATCH',
            url: "/v3/sale/orders/" + localStorage.getItem("orderCode") + "/batchOutstockinvalid",
            data: {}
          }).then((res) => {
            this.saleOrderViewVo.dataBillstate = 3 ;
            this.Public.openSuccess(this, "操作成功！");

          }).catch((err) => {
            this.Public.openError(this, err.response.data);
          });
        })
      },


			save_out() { //出库
				this.$confirm('是否确认出库？', '出库确认', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					cancelButtonClass: "fr",
					confirmButtonClass: "fr",
				}).then(({
					value
				}) => {

					this.axios({
						method: 'PATCH',
						url: "/v3/sale/orders/" + localStorage.getItem("orderCode") + "/batchOutstockpass",
						data: {}
					}).then((res) => {
						this.Public.openSuccess(this, "操作成功！");
						this.queryOrderAndFud();
						this.queryByPage();
						this.$router.push({path: "/order"});
					}).catch((err) => {
						this.Public.openError(this, err.response.data);
					});
				})
			},

			//----------------查询订单和当前资金账户详情----------------------
			queryOrderAndFud() {
				this.axios({
					method: 'POST',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode") + "/queryOrderAndFud",
					data: {},
				}).then((res) => {
					this.memberBname = res.data.memberBname; //客户名称
					this.orderCode = res.data.orderCode; //订单编号
					this.orderApplySpecial = res.data.orderApplySpecial; //是否 特价
					this.deliveryDate = res.data.deliveryDate; //交货日期
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
			//-----------------查询订单和当前资金账户详情---------------------
			queryByPage() {
				this.axios({
					method: 'GET',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode")
				}).then((res) => {
					var orderGoodsViewVoList = res.data.saleOrderGoodsDataList;
					this.saleOrderViewVo = res.data; // 订单详情
					this.saleOrderGoodsViewVoList = orderGoodsViewVoList; // 订单商品
					if(orderGoodsViewVoList != null && orderGoodsViewVoList != undefined) {
						var valuesum = 0;
						for(var i = 0; i < orderGoodsViewVoList.length; i++) {
							this.invalue += orderGoodsViewVoList[i].goodsBuyNum;
							valuesum += orderGoodsViewVoList[i].goodsBuyNum * orderGoodsViewVoList[i].goodsSalePrice;
						}
						this.valuesum = valuesum.toFixed(2);
					}
					//判断订单状态
					if(res.data.dataBillstate == "3") {
						this.tabxiang = true;
					} else {
						this.tabxiang = false;
					}
					//显示原有物流信息
					if(res.data.dataBillstate == "5" || res.data.dataBillstate == "6") {
						this.saleOrderViewVo.deliveryDate = res.data.deliveryDate;
						this.Fdate = new Date(res.data.deliveryDate);
						this.formLabelAlign.region = res.data.deliveryCompany;
						this.formLabelAlign.type = res.data.deliveryBillNo;
						this.form.desc = res.data.deliveryRemark;
					}
				}).catch((err) => {
					this.Public.openError(this,err.response.data);
				});
			},

			query_checkout() {
				this.axios({
					method: 'GET',
					url: "/v3/sale/orders/" + localStorage.getItem("orderCode"),
					data: {}
				}).then((res) => {
					this.saleOrderGoodsViewVoList2 = res.data.saleOrderGoodsDataList;
				}).catch((err) => {
					this.Public.openError(this, err.response.data);
				});
			},
		},

	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.order {
		background: #fff;
		padding: 5px 20px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.order-input-em2 {
		position: relative;
		right: 5px;
		top: 0px;
		cursor: pointer;
	}

	.order-tab {
		margin-top: 15px;
		border-left: 1px solid #e7e9f1;
	}

	.order-tab1 td {
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left: 0;
		position: relative;
	}

	.order-tab1 td img {
		width: 45px;
		margin: 0 auto;
	}

	.order-tab1 .tab-th td {
		background: #eff1f8;
		padding: 14px 0;
	}

	.order-tab1 .order-input1 {
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-indent: 5px;
	}

	.dorder-td td {
		padding: 15px 0;
	}

	.dorder-tend td {
		padding: 12px 15px;
		text-align: right;
	}

	.activedis {
		background: #eff1f8;
		cursor: no-drop;
	}

	.dorder-tend p span {
		display: inline-block;
		width: 120px;
	}

	.dorder-tend p:last-child span {
		color: #f33333;
		font-size: 20px;
	}

	.dorder-tend p {
		margin-top: 0px;
	}

	.order-xinxi {
		margin: 20px;
		margin-bottom: 50px;
	}

	.order-deta {
		position: relative;
		margin-top: 15px;
		clear: both;
		overflow: hidden;
	}

	.order-deta span {
		margin-right: 10px;
	}

	.order-deta a {
		display: inline-block;
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
	}

	.order-deta a:first-child {
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}

	.putongfp {
		margin-left: 62px;
	}

	.order-caozuo {
		position: absolute;
		top: 10px;
		right: 20px;
		z-index: 100;
		color: #7d91a5;
		margin-right: 20px;
	}

	.order-caozuo span {
		margin-left: 15px;
		cursor: pointer!important;
		display: inline-block;
	}

	.order-caozuo span a {
		color: #7d91a5;
	}

	.order-caozuo span a:hover {
		color: #13C19F;
	}

	.order-caozuo span em {
		position: relative;
		top: 2px;
	}

	.order-caozuo span:hover {
		color: #13C19F;
	}

	.order-select {
		overflow: hidden;
		position: relative;
	}

	.order-select h2 {
		color: #f96b6b;
		font-weight: normal;
		margin-top: 15px;
		float: left;
	}

	.order-select p {
		margin-top: 20px;
		float: left;
	}

	.order-select .select-span {
		margin-left: 20px;
	}

	.order-redio {
		float: right;
		margin-top: 20px;
	}

	.huise {
		color: #98a8b8;
		display: inline-block;
		margin-right: 20px;
		text-align: right;
	}

	.order-czrz {
		width: 100%;
		margin-top: 20px;
	}

	.order-czrz th {
		font-weight: normal;
		text-align: left;
		background: #eff1f8;
		border: 1px solid #cdd9e6;
		border-top: 0;
		border-left: 0;
		height: 40px;
		text-indent: 15px;
		font-size: 13px;
	}

	.order-czrz td {
		text-indent: 15px;
		height: 40px;
	}

	.bzstyle {
		border: 1px solid #cdd9e6;
		width: 375px;
		height: 150px;
		margin: 0 auto;
		border-radius: 3px;
	}

	.ckfhjl-top {
		padding: 20px 25px;
		background: #fff9ef;
		margin: 15px 0;
		overflow: hidden;
	}

	.ckfhjl-top-span {
		font-size: 18px;
		color: #f96b6b;
		font-weight: normal;
	}

	.ckfhjl-top p {
		line-height: 30px;
	}

	.ckfhjl-top span {
		margin-right: 20px;
	}

	.chuku-top {
		height: 31px;
		width: 150px;
		text-align: center;
		cursor: pointer;
		line-height: 29px;
		margin: 10px 0;
	}

	.chukuactive {
		border-bottom-right-radius: 20px;
		border-top-right-radius: 20px;
		background: #93a6b7;
		color: #fff;
	}

	.chuku-top em {
		position: relative;
		top: 1px;
	}

	.chuku-table {
		border: 1px solid #cdd9e6;
		position: relative;
	}

	.chuku-two {
		border-top: 1px solid #cdd9e6;
		text-align: right;
		padding: 15px;
	}

	.chuku-two span {
		margin-left: 15px;
	}

	.chuku-two span:hover {
		color: #13C19F;
		cursor: pointer;
	}

	.table-bottom {
		padding: 15px;
	}

	.table-bottom p {
		line-height: 22px;
	}

	.table-bottom span {
    color: rgb(31, 55, 61);
    margin-right: 30px;
	}

  .table-bottom span:first-child {
    color: #98a8b8;
  }

	.shoukuan-table {
		margin-top: 20px;
		border-left: 1px solid rgb(223, 234, 236);
	}

	.addSk {
		position: absolute;
		width: 100px;
		height: 32px;
		line-height: 32px;
		color: #fff;
		background: #13C19F;
		border-radius: 20px;
		text-align: center;
		right: 0;
		bottom: 0px;
		cursor: pointer;
	}

	.tejia {
		color: #fff;
		background: #FF0000;
		margin-left: 3px;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.add {
		position: absolute;
		padding: 10px 20px 20px 20px;
		z-index: 100;
		background: #fff;
		width: 100%;
		box-shadow: 0px 0px 5px #666;
		top: 0;
		left: 0;
		box-sizing: border-box;
	}

	.Fblock {
		margin-top: 20px;
		margin-left: 20px;
		margin-bottom: 22px;
	}

	.Fblock .demonstration {
		margin-right: 8px;
	}

	.search-btn {
		margin-top: 20px;
		clear: both;
	}

	.el-date-editor.el-input {
		width: 320px;
	}

	.wuliB {
		float: left;
		width: 480px;
		margin-top: 18px;
	}

	.wuliB .el-textarea__inner {
		height: 100px;
	}

	.el-col-11 {
		width: 300px;
	}

	.el-select {
		width: 300px;
	}

	.daizhifu {
		box-sizing: border-box;
		margin-left: 25px;
		padding: 15px;
		background: #f8f9fd;
		margin-top: 20px;
	}

	.daizhifu p {
		border-bottom: 1px solid #cdd9e6;
		line-height: 35px;
		margin-bottom: 5px;
	}

	.daizhifu>span {
		font-size: 22px;
		color: #f96b6b;
	}

	.daizhifu>span span {
		position: relative;
		top: 3px;
		margin-left: 5px;
	}

	.daizhifu i span {
		margin: 0 10px;
	}

	.el-date-editor.el-input {
		width: 180px;
	}

	.upload-demo {
		margin-left: 100px;
	}

	.caozuoqizhi {
		cursor: pointer;
	}

	.caozuoqizhi em {
		font-size: 12px;
		margin-left: 2px;
		display: inline-block;
	}

	.activEm {
		-webkit-transform: rotateX(180deg);
		transform: rotateX(180deg);
	}

	.p:hover {
		background: #EEF1F9;
		color: #03b8cc;
	}

	.p {
		text-indent: 10px;
	}

	.benciCk input {
		height: 34px;
		width: 80px;
		border: 1px solid #cdd9e6;
		border-radius: 4px;
		text-indent: 5px;
		margin-right: 3px;
	}

	.order-select p {
		margin-right: 20px;
	}

	.chuku-em {
		top: -1px!important;
	}

	.chuku-two-a {
		display: inline-block;
		height: 32px;
		color: #FFF;
		background: #13C19F;
		width: 80px;
		text-align: center;
		line-height: 32px;
		border-radius: 20px;
	}

	.add h3 {
		font-size: 16px;
		font-weight: normal;
	}

	.name-wrapper img {
		width: 42px;
		margin: 0 auto;
	}

	.outpass {
		display: inline-block;
		width: 80px;
		box-sizing: border-box;
		height: 32px;
		line-height: 32px;
		text-align: center;
		background: #13C19F;
		color: #fff;
		border-radius: 20px;
	}

	.order-caozuo .outpass:hover {
		color: #fff;
	}
</style>
